<!--
universal dialog组件，快速创建一个通用对话框
老轮子工了
-->
<template>
  <q-dialog v-model="display" persistent>
    <q-card style="width: 75%; min-width: 350px; max-height: 80%">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">{{ title }}</div>
        <q-space/>
        <q-btn v-if="!type.toLowerCase().includes('wait')" round flat icon="close" dense @click="onCloseEvent"/>
      </q-card-section>
      <q-card-section>
        <slot />
      </q-card-section>
      <q-card-actions class="row" align="center">
        <q-btn v-if="type.toLowerCase().includes('ok')"
               :icon="okIcon"
               :label="okLabel"
               @click="onOkEvent()" class="col-3"/>
        <q-btn v-if="type.toLowerCase().includes('cancel')"
               :icon="cancelIcon"
               :label="cancelLabel"
               @click="onCancelEvent()" class="col-3"/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  export default {
    name: "uDialog",
    props: {
      display: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: 'Message'
      },
      type: {
        type: String,
        default: 'Ok'
      },
      okLabel: {
        type: String,
        default: 'OK'
      },
      okIcon: {
        type: String,
        default: 'check'
      },
      cancelLabel: {
        type: String,
        default: 'Cancel'
      },
      cancelIcon: {
        type: String,
        default: 'clear'
      },
      text: {
        type: String
      }
    },
    model: {
      prop: 'display',
      event: 'onDisplayChangeEvent'
    },
    methods: {
      onOkEvent() {
        this.$emit('ok');
      },
      onCancelEvent() {
        this.$emit('cancel');
      },
      onCloseEvent() {
        this.$emit('onDisplayChangeEvent', false);
      }
    }
  }
</script>

<style scoped>

</style>
